<!--
 * @Author: Olivia
 * @Date: 2022-06-23 22:57:06
 * @LastEditTime: 2022-11-02 21:24:59
 * @FilePath: \toutiao-m\src\components\articleItem\index.vue
 * @custom_string_Olivia: Less is more
-->
<template>
    <!--跳转方式  :to=" `/article${article.art_id}`"
           :to="'/article'+article.art_id "-->
    <van-cell
      class="article-item"
      :to="{
        name: 'article',
        params: {
           articleId: article.art_id
        }
      }"
    >
        <div class="title" slot="title">{{ article.title }}</div>
        <div slot="label">
            <div class="cover-wrap" v-if="article.cover.type === 3">
                <div class="cover-item" v-for="(img, index) in article.cover.images" :key="index">
                    <van-image
                    class="cover-item-img"
                    fit="cover"
                    :src="img" />
                </div>
            </div>
            <div class="label-info-wrap">
                <span>{{ article.aut_name }}</span>
                <span>{{ article.comm_count }}评论</span>
                <span>{{ article.pubdate | relativeTime }}</span>
            </div>
        </div>
        <van-image
            class="right-cover"
            fit="cover"
            v-if="article.cover.type === 1"
            slot="default"
            width="100" height="100"
            :src="article.cover.images[0]" />
    </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  // 接收一个对象，必传
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  components: {},
  data () {
    return {}
  },
  mounted () { },
  methods: {}
}
</script>

<style lang="less" scoped>
.article-item{
    .title{
        font-size: 32px/2;
        color: #3a3a3a;
    }
    .van-cell__value{
        flex: unset;
        width: 232px/2;
        height: 146px/2;
        padding-left: 25px/2;
    }
    .right-cover{
        width: 232px/2;
        height: 146px/2;
    }
    .label-info-wrap span{
        font-size: 11px;
        color: #b4b4b4;
        margin-right: 25px/2;
    }
    .cover-wrap{
        display: flex;
        padding: 15px 0;
        .cover-item{
            flex: 1;
            height: 140px/2;
            &:not(:last-child){
                padding-right: 4px;
            }
            .cover-item-img{
                width: 100%;
                height: 146px/2;
            }
        }
    }
}
</style>
